<template>
    <main class="faq">
        <h1>Frenquently Asked Questions</h1>
        <Loading v-if="remoteDataBusy" />
        <div class="error" v-if="hasRemoteErrors">
            Can't load the questions
        </div>
        <section class="list">
            <article v-for="question of questionsList" :key="question.title">
                <h2 v-html="question.title"></h2>
                <p v-html="question.content"></p>
            </article>
        </section>
    </main>
</template>

<script>
import RemoteData from "../mixins/RemoteData"
export default {
    //'questions'为请求的地址，questionsList接收请求返回的对象
    mixins:[RemoteData(
        {questionsList:'questions',})],
    // data(){
    //     return{
    //         questions:[],
    //         error:null,
    //         loading:true,
    //     }
    // },
    // async created(){
    //     this.loading=true
    //     try {
    //         this.questions=await this.$fetch('questions')
    //     } catch (e) {
    //         this.error=e
    //     }

        // fetch('http://localhost:3000/questions').then(response=>{
        //     if(response.ok){
        //         return response.json()
        //     }else{
        //         return Promise.reject('error')
        //     }
        // }).then(retult=>{
        //             this.questions=retult
        //             this.loading=false
        // }).catch(e=>{this.error=e
        //              this.loading=false})

        // try {
        //     const response =await fetch('http://localhost:3000/questions')
        //     if(response.ok){
        //         this.questions= await response.json()
        //     }else{
        //         throw new Error('error')
        //     }
        // } catch (e) {
        //     this.error=e
            
        // }
        // this.loading=false       
    // },
}
</script>